.tox-floating-sidebar when (@custom-properties-enabled = true) {
  --tox-private-floating-sidebar-box-shadow: 0 0 40px 1px hsl( from var(--tox-private-color-black) h s l / 15%), 0 16px 16px -10px hsl( from var(--tox-private-color-black) h s l / 15%);
}

.tox {
  .tox-floating-sidebar {
    // This is our internal variable, it's not meant to be a part of an external skinning API. It's value is being set by javascript. It is not behind a feature flag on purpose.
    --tox-private-floating-sidebar-requested-height: 600px;
    --tox-private-floating-sidebar-requested-top: 0;
    --tox-private-floating-sidebar-requested-left: 0;
    --tox-private-floating-sidebar-width: min(380px, 90vw);
    --tox-private-floating-sidebar-height: ~"min(var(--tox-private-floating-sidebar-requested-height), 80vh)";

    box-shadow: var(--tox-private-floating-sidebar-box-shadow, 0 0 40px 1px fade(@color-black, 15%), 0 16px 16px -10px fade(@color-black, 15%));
    width: var(--tox-private-floating-sidebar-width);
    height: var(--tox-private-floating-sidebar-height);
    background-color: var(--tox-private-background-color, @background-color);
    border-radius: 12px;
    overflow: hidden;

    &.origin-topleft {
      top: var(--tox-private-floating-sidebar-requested-top);
      left: var(--tox-private-floating-sidebar-requested-left);
    }

    &.origin-topright {
      top: var(--tox-private-floating-sidebar-requested-top);
      left: calc(var(--tox-private-floating-sidebar-requested-left) - var(--tox-private-floating-sidebar-width));
    }

    &.origin-bottomleft {
      top: calc(var(--tox-private-floating-sidebar-requested-top) - var(--tox-private-floating-sidebar-height));
      left: var(--tox-private-floating-sidebar-requested-left);
    }

    &.origin-bottomright {
      top: calc(var(--tox-private-floating-sidebar-requested-top) - var(--tox-private-floating-sidebar-height));
      left: calc(var(--tox-private-floating-sidebar-requested-left) - var(--tox-private-floating-sidebar-width)); 
    }
  }

  .tox-floating-sidebar__content-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .tox-floating-sidebar__header {
    position: relative;
  }
}
